<template>
  <div class="packmate">
    <div class="banner">
      <img v-for="item in packmateList.banner" :key="item.banner_id" :src="item.pic" alt="">
    </div>
    <div class="top-container container">
      <div class="top">
        <h3>PMVER<span>TM</span>(Packmate Verification)是找包装网联合SGS、Intertek等推出的消费品包装企业专属认证</h3>
        <div class="top-desc">
          <div class="left-item">
            <div class="item">
              <div class="icon">
                <img src="~assets/images/newpage-image/packmate-icon1.png" alt="">
              </div>
              <div class="title">
                真实工厂
              </div>
              <div class="txt">
                结合官方授权大数据和企业实地审核，确保所有入驻企业的真实与规范。
              </div>
            </div>
            <div class="item">
              <div class="icon">
                <img src="~assets/images/newpage-image/packmate-icon3.png" alt="">
              </div>
              <div class="title">
                灵活多样
              </div>
              <div class="txt">
                支持多种不同等级的标准认证和定制认证，企业可以根据需要灵活选择。
              </div>
            </div>
          </div>
          <div class="middle">
            <img src="~assets/images/newpage-image/packmate-middle.png" alt="" >
          </div>
          <div class="right-item">
            <div class="item">
              <div class="icon">
                <img src="~assets/images/newpage-image/packmate-icon2.png" alt="">
              </div>
              <div class="title">
                权威机构
              </div>
              <div class="txt">
                与全球知名权威审核机构SGS、Intertek等战略合作，联合打造认证品牌。
              </div>
            </div>
            <div class="item">
              <div class="icon">
                <img src="~assets/images/newpage-image/packmate-icon4.png" alt="">
              </div>
              <div class="title">
                广泛认可
              </div>
              <div class="txt">
                PMVER认证体系获得联合利华、欧莱雅、华为等众多品牌方的认可，市场含金量高。
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="pack-list">
      <div class="item" v-for="item in packmateList.verification" :key="item.id">
        <div class="container">
          <div class="pic">
            <img :src="item.image" alt="" class="objectCover">
          </div>
          <div class="pack-desc">
            <div class="title">
              <img :src="item.icon" alt="">
              {{item.title}}
            </div>
            <div class="desc">
              PMVER<span>TM</span>{{ item.content }}
            </div>
            <div class="link-btn" @click="handlerApply">
              <span>申请认证</span>
              <img src="~assets/images/newpage-image/arrow-little.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="user-voice">
      <div class="container">
        <div class="title">
          <h3>听听他们说</h3>
        </div>
        <div class="swipervoice">
          <swiper class="swiper"  :options="voiceSwiper">
            <swiper-slide class="user" v-for="(item,index) in packmateList.say" :key="index">
              <div class="user-photo">
                <img :src="item.image_input" alt="" class="objectCover">
              </div>
              <div class="user-box">
                <div class="user-info">
                  <p class="userpost">{{item.company}}</p>
                  <div class="name">
                    <h3 class="username">{{item.title}}</h3>
                    <p class="userposition">{{item.position}}</p>
                  </div>
                </div>
                <div class="user-txt">
                  <img src="~assets/images/newpage-image/bd-icon.png" alt="">
                  <p>{{item.synopsis}} </p>
                  <img src="~assets/images/newpage-image/bd-ficon.png" alt="" class="last-icon">
                </div>
              </div>
            </swiper-slide>
          </swiper>
          <div class="botton-icon">
            <div class="voice-pagination" slot="pagination"></div>
          </div>
          <div class="arrow-icon">
            <div class="swiper-button-prev" slot="button-prev">
            </div>
            <div class="swiper-button-next" slot="button-next">
            </div>
          </div>
        </div>
      </div>
    </div>  
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import { packmateSayApi } from '@/request/api'

export default {
  name: 'Packmate',
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      voiceSwiper: {
        slidesPerView: 3,
				spaceBetween : 15,
        slidesPerGroup:3,
        loop: true,
        loopFillGroupWithBlank: true,
				pagination: {
					el: '.voice-pagination',
					clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      packmateList:{
        banner: [],
        say:[],
        verification:[]
      }
    }
  },
  mounted(){
    this.getPackmateSayList()
  },
  methods:{
    handlerApply(){
      this.$router.push('/home/businessSettlement')
    },
    async getPackmateSayList() {
      const res = await packmateSayApi()
      try {
        this.packmateList.banner = res.data.banner
        this.packmateList.say = res.data.say
        this.packmateList.verification = res.data.verificatio
      } catch(err) {
        this.$message.error(err.message)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .packmate{
    .banner{
      img{
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .top-container{
      padding-top: 93px;
      .top{
        h3{
          text-align: center;
          font-size: 30px;
          color: #666;
          line-height: 48px;
          padding: 0 166px;
          span{
            display: inline-block;
            font-size: 14px;
            vertical-align: top;
            margin-top: -4px;
          }
        }
        .top-desc{
          display: flex;
          margin-top: 95px;
          .left-item{
            .item{
              .icon{
                width: 33px;
                height: 38px;
              }
            }
          }
          .right-item{
            .item{
              .icon{
                width: auto;
                height: 37px;
              }
            }
          }
          .middle{
            height: 383px;
            margin: 0 90px;
            img{
              display: block;
              height: 100%; 
            }
          }
          .item{
            margin-bottom: 68px;
            .title{
              color: #E48B2C;
              font-size: 24px;
              margin: 20px 0 18px;
            }
            .txt{
              font-size: 16px;
              color: #666;
              line-height: 30px;
            }
          }
        }
      } 
    }
    .pack-list{
      margin-top:46px;
      .item{
        height: 357px;
        background-size: 47% 86%;
        background-repeat: no-repeat;
        margin-bottom: 63px;
        .container{
          position: relative;
          .pic{
            width: 494px;
            height: 284px;
            position: absolute;
            top: 0;
          }
          .pack-desc{
            position: absolute;
            top: 0;
            width: 660px;
            height: 357px;
            background: #FFFFFF;
            box-shadow: 0px 0px 22px 0px rgba(180, 178, 178, 0.22);
            padding: 73px 30px 0 38px;
            .title{
              font-size: 24px;
              color: #666;
              font-weight: bold;
              display: flex;
              align-content: center;
              img{
                display: inline-block;
                width: 27px;
                height: 27px;
                vertical-align: middle;
                margin-top: 2px;
                margin-right: 13px;
              }
              span{
                display: inline-block;
                font-size: 14px;
                vertical-align: top;
                margin: 2px 6px 0 0;
              }
            }
            .desc{
              margin: 32px 0 20px;
              font-size: 16px;
              color: #666;
              line-height: 32px;
              span{
                display: inline-block;
                font-size: 12px;
                vertical-align: top;
                margin: -2px 6px 0 0;
              }
            }
            .link-btn{
              display: block;
              width: 108px;
              height: 40px;
              border: 1px solid #E48B2C;
              border-radius: 10px;
              text-align: center;
              
              font-size: 16px;
              color: #E48B2C;
              padding-top: 8px;
              img{
                margin-left: 8px;
              }
            }
          }
        }
        &:nth-of-type(2n-1){
          background-image: url('~@/assets/images/newpage-image/packmate-bg1.jpg');
          background-position: left bottom;
          .container{
            .pic{
              left: 0;
            }
            .pack-desc{
              right: 0;
            }
          }
        }
        &:nth-of-type(2n){
          background-image: url('~@/assets/images/newpage-image/packmate-bg2.jpg');
          background-position: right bottom;
          .container{
            .pic{
              right: 0;
            }
            .pack-desc{
              left: 0;
            }
          }
        }
      }
    }
    .user-voice{
      background: #F3F4F7;
      padding: 70px 0;
      .title{
        font-size: 30px;
        color: #4D4D4D;
        text-align: center;
        position: relative;
        h3{
          position: relative;
          width: 200px;
          margin:0 auto ;
          &::before{
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            width: 9px;
            height: 9px;
            background: #E9E9E9;
            border-radius: 50%;
            transform: translateY(-50%);
          }
          &::after{
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: 9px;
            height: 9px;
            background: #E9E9E9;
            border-radius: 50%;
            transform: translateY(-50%);
          }
        }
        &::before{
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          width: 42%;
          height: 1px;
          background: #E9E9E9;
          transform: translateY(-50%);
        }
        &::after{
          content: '';
          position: absolute;
          top: 50%;
          right: 0;
          width: 42%;
          height: 1px;
          background: #E9E9E9;
          transform: translateY(-50%);
        }
      }
      .swipervoice{
        margin-top: 80px;
        position: relative;
        .user{
          height: 382px;
          position: relative;
          padding-top: 35px;
          transition: all .3s;
          &:hover{
            bottom: 6px;
            box-shadow: 0px 8px 6px 0px rgba(213, 208, 208, 0.17);
          }
          .user-photo{
            width: 122px;
            height: 107px;
            position: absolute;
            top: 0;
            left: 20px;
            z-index: 99;
          }
          .user-box{
            height: 347px;
            background: #FFFFFF;
            border: 1px solid #E9E9E9;
            padding: 10px 20px;
            position: relative;
            .user-info{
              margin-left: 140px;
              .userpost{
                color: #969696;
                font-size: 16px;
              }
              .name{
                display: flex;
                align-content: center;
                margin-top: 10px;
              }
              .username{
                color: #666;
                font-size: 24px;
                margin-right: 6px;
              }
              .userposition{
                height: 22px;
                line-height: 22px;
                padding: 0 10px;
                background: #E48B2C;
                border-radius: 11px;
                font-size: 14px;
                color: #fff;
                margin-top: 6px;
              }
            }
            .user-txt{
              margin-top: 25px;
              font-size: 16px;
              color: #666;
              line-height: 30px;
              width: 90%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
              span{
                font-size: 26px;
                color: #E48B2C;
              }
              .last-icon{
                float:right;
              }
              p{
                padding: 0 20px;
              }
            }
          }
        }
        
        .botton-icon{
          position: relative;
          margin-top: 45px;
        }
        .swiper-container-multirow-column>.swiper-wrapper{
          flex-direction: row !important;
        }
        .voice-pagination {
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
        .voice-pagination /deep/ .swiper-pagination-bullet {
          display:inline-block;
          width: 9px;
          height: 9px;
          border-radius: 50%;
          margin-right: 16px;
          background: #969696;
          box-shadow: 0 0 6px rgba(150, 150, 150, .9);
          opacity: 1;
          outline: none;
        }


        .voice-pagination /deep/ .swiper-pagination-bullet-active {
            background:  rgba(228,139,44,.9);
            box-shadow: 0 0 6px rgba(228,139,44,.9);
        }
        .arrow-icon{
          
          .swiper-button-next{
            background-image: url('~@/assets/images/newpage-image/arrow-right.png');
            right: -60px;
            outline: none;
          }
          .swiper-button-prev{
            background-image: url('~@/assets/images/newpage-image/arrow-left.png');
            left: -60px;
            outline: none;
          }
        }
      }
      
    }
  }
</style>